.panelContainer {
  width: 100%;
  height: 100%;
  background-image: url("https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDfWho8gHeLmlviqqjLQ7kZvtJxaM_ywACRyQAAgm3kVe1hknA9Jvl6TYE.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color:  transparent;

  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  .player-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .player-name {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
    
    .player-stats {
      display: flex;
      gap: 10px;
      
      .stat-item {
        font-size: 14px;
        font-weight: bold;
        background-color: #f0f0f0;
        padding: 2px 8px;
        border-radius: 10px;
      }
    }
  }

  .gems-container {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 5%;
    
    .gems-grid {
      display: flex;
      gap: 23px;
      width: 100%;
      
      .gem-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        
        .gem-stack-container {
          position: relative;
          width: 50px;
          height: 50px;
          
          .gem-stack {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            
            // 叠放效果：每个宝石向左偏移，形成遮挡效果
            &:nth-child(1) { z-index: 5; }
            &:nth-child(2) { z-index: 4; left: 10px; }
            &:nth-child(3) { z-index: 3; left: 20px; }
            &:nth-child(4) { z-index: 2; left: 30px; }
            &:nth-child(5) { z-index: 1; left: 40px; }
          }
        }
        
        .icon-container {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50px;
          height: 50px;
        }
        
        .gem-count {
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }

  // 宝石颜色样式
  .red-gem {
    background-image: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDe0Jo8fG86LQ55wEn4XqdXKOi1zCPHwACSiEAAgm3kVfAdFazE3qw3DYE.png');
  }

  .blue-gem {
    background-image: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDe0Bo8fG371QHiXEzAaSMYUO0oEXWVgACSCEAAgm3kVd0dE_vl27q4jYE.png');
  }

  .green-gem {
    background-image: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDez9o8fG3DnUzAT-nJVd9EDxcCfxRgAACRyEAAgm3kVcTMz2farlPLTYE.png');
  }

  .white-gem {
    background-image: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDez5o8fG3IsmpaBMkWKVe-PE5C070kQACRiEAAgm3kVfuZEJhbpkwhTYE.png');
  }

  .black-gem {
    background-image: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDez1o8fG3gnh1di8o4dh3i1QIVhp2xAACRSEAAgm3kVeXx91YLBbu4jYE.png');
  }

  .gold-gem {
    background-image: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDe0No8fG8lC520Z4sqxuv2szLiU51hwACSyEAAgm3kVe9agb3mknfwDYE.png');
  }

  .pink-gem {
    background-image: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDe0Fo8fG37wMFEY0CzuRye0ZQ8RRN8AACSSEAAgm3kVcipeSVCe3TjjYE.png');
  }

  // 宝石数量颜色样式
  .red-count {
    color: #ff6b6b;
  }

  .blue-count {
    color: #4d96ff;
  }

  .green-count {
    color: #6bcb77;
  }

  .white-count {
    color: #f0f0f0;
  }

  .black-count {
    color: #666;
  }

  // 默认颜色（用于皇冠和特权）
  .default-count {
    color: #333;
  }

  .crowns-icon {
    background-image: url("https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDfc9o8gVE-2viMA7fMvMU2dzy6ETH5AACzyQAAgm3kVcr6w5dXb8_HDYE.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 40px;
  }

  .privilege-icon {
    background-image: url("https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDfedo8ggG-4V1CcNxJr5zvgFTaCJ0dwAC7CQAAgm3kVfEy4-9Po_yzDYE.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 40px;
  }
}